<template>
  <van-nav-bar
      title="订单列表"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
  />
  <div v-for="item in list" :key="item">
    <van-card
        num="1"
        :price="item.price"
        :title="item.goods.name"
        :thumb="'http://local.bs.com/storage/'+item.goods.image"
        origin-price="10.00"
    >
      <template #footer>
        <van-button plain size="small" v-if="item.status==1" @click="pay(item.id)">去付款</van-button>
        <span v-if="item.status==2">等待卖家发货</span>
        <van-button v-if="item.status==3" @click="confirm(item.id)">确认收货</van-button>
      </template>
    </van-card>
  </div>
  <van-pagination v-model="currentPage" :total-items="total" :items-per-page="15" @change="pageClick"/>
  <van-divider></van-divider>
</template>

<script>
import {myOrder,confirm} from "@/api/order";
import {Toast} from "vant";

export default {
  name: "OrderList",
  data(){
    return {
      list:{goods:{}},
      currentPage:1,
      total:0,
    }
  },
  created() {
    myOrder(1).then((res)=>{
      this.list = res.data.data
      this.total = res.data.total
    })
  },
  methods:{
    pageClick(){
      myOrder(this.currentPage).then((res)=>{
        this.list = res.data.data
        this.total = res.data.total
      })
    },
    pay(id){
      this.$router.push('/order?id='+id)
    },
    onClickLeft() {
      history.back()
    },
    confirm(id){
      confirm(id).then(()=>{
        Toast.success("已确认收货");
        this.$router.go(0)
      })
    }
  }
}
</script>

<style scoped>

</style>
